<template>
	<view class="bill">
		<view class="suc-nav" :style="{ height: sysHeight+'px' }" :class="isShow?'on':''">
			<view class="bottom acea-row row-middle row-center-wrapper">
				<image class="suc-w" src="../../static/images/suc-w.png" mode="aspectFit"></image>
				<text>已保存至本地相册</text>
			</view>
		</view>
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" @click="back">
					<image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text>
				</view>
				<view class="fs-34">纳税记录申请记录</view>
				<view class="backbtn"></view>
			</view>
		</view>
		<view style="width: 100%;height: 170rpx;"></view>
		
		<view class="text">
			<view>温馨提示：</view>
			<view>1.仅支持查询最近30天（含30天）内开具的纳税记录，如有需要，请重新开具； </view>
			<view>2.若您对纳税记录的内容有疑问，请 <text style="color: #4985E8;">点此帮助。</text> </view>
		</view>
		
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="item">
				<view class="bold fs-30" :class="sucId==item.id && sec!=0 ?'fc-999':''">申请时间：{{ item.add_time }}</view>
				<view class="acea-row row-between-wrapper">
					<view class="mt-10 fs-28 fc-999">税款所属期：{{ item.start_date }}至{{ item.end_date }}</view>
					<block v-if="is_zhi && index==0">
						<view class="fs-28" style="color: #FD6C12;" >制作中...</view>
					</block>
					<block v-else>
						<view class="fs-28 suct" :class="sucId==item.id && sec!=0 ?'fc-999':''">制作成功</view>
					</block>
				</view>
				<view class="mt-10 fs-28 fc-999">开具范围：{{ item.fanwei }}</view>
			</view>
			<view class="acea-row row-right row-middle" style="padding: 10rpx 30rpx 30rpx 0; color: #5386D2;">
				<view class="" v-if="sucId==item.id && sec!=0">
					<text style="color: #333;font-size: 30rpx;">{{ sec }}s</text>
					<text style="color: #888;font-size: 28rpx;">后可再次操作</text>
				</view>
				<block v-else>
					<block v-if="is_zhi && index==0">
						<view class="acea-row row-middle" style="margin-left: 30rpx;">
							<image class="shuaxin" src="../../static/images/shuaxin.png" mode="aspectFit"></image>
							<text>刷新</text>
						</view>
					</block>
					<block v-else>
						<view class="acea-row row-middle" @click="godetails(item.images,item.id)" >
							<image class="eye" src="../../static/images/eye.png" mode="aspectFit"></image>
							<text>预览</text>
						</view>
						<view class="acea-row row-middle" style="margin-left: 30rpx;" @click="download(item.images,item.id)">
							<image class="cunchu" src="../../static/images/chucun01.png" mode="aspectFit"></image>
							<text>保存</text>
						</view>
					</block>
				</block>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import{
		getbill
	} from '@/api/user.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 50;
	export default {
		data() {
			return {
				sysHeight:sysHeight,
				isShow: false,
				list:[],
				sec:30,
				sucId:0,
				timers:null,
				loading:false,
				is_zhi: 0,
			};
		},
		onLoad(option) {
			this.is_zhi = option.is_zhi || 0;
			let id = option.id || 0;
			if( id ){
				this.sucId = id;
				this.daojishi();
			}
			this.getbill();
			
		},
		mounted() {
			setTimeout(()=>{
				this.is_zhi = false;
			},1000)
		},
		methods:{
			getbill(){
				let that = this;
				getbill({
					page:1,
					limit:10000
				}).then(res=>{
					that.list = res.data.data
				}).catch(err=>{
					
				})
			},
			daojishi(){
				let that = this;
				that.timers = setInterval(()=>{
					if( that.sec==0 ) return clearInterval(that.timers)
					that.sec = that.sec-1
				},1000)
			},
			download(file,id) {
				let that = this;
				let list = file;
				uni.showLoading();
				for( let i=0;i<list.length;i++ ){
					uni.saveImageToPhotosAlbum({
						filePath: list[i],
						success() {
							setTimeout(()=>{
								uni.hideLoading();
								that.isShow = true;
								that.sucId = id;
								if( i==list.length-1 ) return that.daojishi();
							},1000)
							setTimeout(()=>{
								that.isShow = false;
							},2000)
						},
						fail(e) {
							uni.hideLoading();
						}
					})
				}
			},
			godetails(images,id){
				let data = encodeURIComponent(JSON.stringify(images));
				uni.reLaunch({
					url: '/pages/index/issue-details?images=' + images +'&id='+id
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onHide() {
			clearInterval(this.timers)
		},
		onUnload() {
			clearInterval(this.timers)
		}
	}
</script>

<style lang="scss">
	.bill{
		.suct{
			color: #2AC57B;
		}
		.suc-nav{
			width: 100%;
			background-color: #62C082;
			z-index: 9999;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			color: #ffffff;
			font-size: 34rpx;
			transform: translate3d(0, -100%, 0);
			transition: all .3s cubic-bezier(.25, .5, .5, .9);
			
			&.on{
				transform: translate3d(0, 0, 0);
			}
			
			.bottom{
				position: absolute;
				bottom: 20rpx;
				left: 0;
				right: 0;
				width: 100%;
				
			}
			
			.suc-w{
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}
		}
		
		.list{
			width: 100%;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			
			.item{
				padding: 30rpx;
				border-bottom: 1rpx dashed #f2f2f2;
				
				
			}
		}
		
		.eye{
			width: 35rpx;
			height: 35rpx;
			margin-right: 5rpx;
		}
		.cunchu{
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}
		.shuaxin{
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}
		
		.text{
			width: 100%;
			padding: 30rpx;
			background-color: #EAF4FE;
			color: #333333;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			z-index: 1;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}	
		}
	}
	
</style>
